import React from 'react';
import {inject, observer} from 'mobx-react';
import {Icon, Flex} from 'weaver-mobile';
import base from "../../util/base";
import {getLabel} from "../../util/common";

@observer
export default class Main extends React.Component {
    constructor() {
        super();
    }

    render() {
        const menus = this.getTabs();
        const {wfSignListStore} = base.allStores;
        const totalWidth = 100 - menus.length * 2;
        let btnWitdh = totalWidth / menus.length;
        const {activeKey, showRefWf = false} = wfSignListStore;
        const {tabKey} = base.wfGlobalStore;

        return (
            <div className={`wf-sign-list-tab-info ${tabKey == 'signlist' ? 'wf-sign-list-tab-info-tab' : ''}`}>
                <Flex className={'wf-sign-list-tab'}>
                    {
                        menus && menus.map((item, index) => {
                            const {hasIcon = false, key, menuName, menuFun, placeholder = false} = item;
                            return (
                                placeholder ?
                                    <Flex.Item key={`sign-tab-${index}`}></Flex.Item>
                                    :
                                    <Flex.Item key={key} className={`tab-item ${activeKey == key ? 'tab-item-selected' : ''}`}
                                               onClick={() => this.onTabChange(key)}>
                                        <div className={`tab-name`}>
                                            {menuName}
                                            {hasIcon && <Icon className={'tab-item-icon'} type={showRefWf ? 'arrow-up' : 'arrow-down'}/>}
                                        </div>
                                    </Flex.Item>
                            )
                        })
                    }
                </Flex>
                <div className={'wf-sign-refwfs'}>
                    {(showRefWf && (activeKey == '4' || activeKey == '5')) && this.getSubContent()}
                </div>
            </div>
        )
    }

    //tab改变
    onTabChange(key) {
        const {wfSignListStore} = base.allStores;
        const {requestLogParams = {}, updateLogParams, activeKey, showRefWf} = wfSignListStore;
        const {allrequestInfos = [], wfsignlddtcnt, userId} = requestLogParams;
        //计算tabkey
        let params = {pgnumber: 1, maxrequestlogid: 0};
        let refRequestid = '';
        //主流程
        if (key === '3') {
            allrequestInfos.forEach(reqinfo => {
                const {requestid, type, relwfid, relviewlogs} = reqinfo;
                if (type === 'main') {
                    refRequestid = requestid;
                    params.requestid = requestid;
                    params.workflowid = relwfid;
                    params.viewLogIds = relviewlogs;
                    params.wfsignlddtcnt = wfsignlddtcnt;
                    params.pgnumber = 1;
                    params.maxrequestlogid = 0;
                    params.loadmethod = 'scroll';
                    params.isrequest = 3;
                }
            })
        }
        if (key === '2') params.atmet = userId;
        if (key === '1') params.atmet = '';
        let _showRefWf = activeKey == key ? !showRefWf : (key == '4' || key == '5');
        wfSignListStore.setState({activeKey: key, refRequestid, showRefWf: _showRefWf});
        if (key === '1' || key === '2' || key === '3') {
            updateLogParams(params, true);
        }
    }

    //获取tabs数据
    getTabs() {
        const {wfSignListStore} = base.allStores;
        const {requestLogParams} = wfSignListStore;
        const {isRelatedTome, hasMainWfRight, hasChildWfRight, hasParallelWfRight, allrequestInfos} = requestLogParams;

        let mainWf = hasMainWfRight ? allrequestInfos.filter(w => w['type'] === 'main') : '';
        let childWf = hasChildWfRight ? allrequestInfos.filter(w => w['type'] === 'sub') : '';
        let parallelWf = hasParallelWfRight ? allrequestInfos.filter(w => w['type'] === 'parallel') : '';
        let tabDatas = [{
            menuName: getLabel(332,'全部'),
            key: "1",
        }];

        isRelatedTome && tabDatas.push({
            menuName: getLabel(32572,'与我相关'),
            key: "2",
        })
        mainWf && tabDatas.push({
            menuName: getLabel(21254,'主流程'),
            key: "3",
        })
        childWf && tabDatas.push({
            menuName: getLabel(19344,'子流程'),
            key: "4",
            hasIcon: true,
        })
        parallelWf && tabDatas.push({
            menuName: getLabel(21255,'平行流程'),
            key: "5",
            hasIcon: true,
        })
        let tabSize = tabDatas.length;
        if (tabSize < 4) {
            for (let i = 0; i < 4 - tabSize; i++) {
                tabDatas.push({'placeholder': true});
            }
        }
        return tabDatas;
    };

    clickRefWf(key) {
        const {wfSignListStore} = base.allStores;
        const {requestLogParams = {}, updateLogParams} = wfSignListStore;
        const {allrequestInfos = [], wfsignlddtcnt, userId} = requestLogParams;
        let params = {pgnumber: 1, maxrequestlogid: 0};
        allrequestInfos.forEach(reqinfo => {
            const {requestid, type, relwfid, relviewlogs} = reqinfo;
            if (Number(requestid) === Number(key)) {
                params.requestid = requestid;
                params.workflowid = relwfid;
                params.viewLogIds = relviewlogs;
                params.wfsignlddtcnt = wfsignlddtcnt;
                params.pgnumber = 1;
                params.maxrequestlogid = 0;
                params.loadmethod = 'scroll';
                if (type=='sub') params.isrequest = 2;
                if (type == 'parallel') params.isrequest = 4;
            }
        });
        wfSignListStore.setState({refRequestid: key, showRefWf: false});
        updateLogParams(params, true);
    }

    //获取子tab
    getSubContent() {
        const {wfSignListStore} = base.allStores;
        const {requestLogParams, activeKey} = wfSignListStore;
        const {wfsignlddtcnt, hasChildWfRight, hasParallelWfRight, allrequestInfos = []} = requestLogParams;

        let refwf = [];
        if (hasChildWfRight && activeKey == '4') refwf = allrequestInfos.filter(w => w['type'] === 'sub');
        if (hasParallelWfRight && activeKey == '5') refwf = allrequestInfos.filter(w => w['type'] === 'parallel');

        return (
            <div className={'wf-sign-refwf-list'}>
                {
                    refwf.map((item, index) => {
                        const {requestid, requestname = ''} = item;
                        const bottomBorderClass = index < refwf.length - 1 ? 'refwf-bottom-border' : '';
                        return (
                            <div key={index} className={`wf-sign-refwf-item ${bottomBorderClass}`}
                                 onClick={() => this.clickRefWf(requestid)}>{requestname}</div>
                        )
                    })
                }
            </div>
        )

    };
}